<template>
	<view class="content">
		<!-- 海报弹窗 -->
		<view class="cu-modal" :class="{ show: showPoster }">
			<view class="cu-dialog" style="width: 640rpx;background: none;">
				<view class="poster-img-box"><image class="poster-img" :src="posterImage" mode="widthFix"></image></view>
				<view class="poster-btn-box u-m-t-20 u-flex u-row-between u-col-center" v-show="posterImage">
					<button class="save-btn u-reset-button" @tap="saveImage">{{ ['wxOfficialAccount', 'H5'].includes(platform) ? '长按图片保存' : '保存图片' }}</button>
					<button class="cancel-btn u-reset-button" @tap="go">关闭</button>
				</view>
			</view>
		</view>
		<!-- 分享tools -->

		<!-- 各海报模块 -->
		<shopro-canvas v-if="showPoster" ref="shoproCanvas" :canvasParams="canvasParams" @success="onSuccess"></shopro-canvas>
	</view>
</template>
<script>
/**
 * 分享弹窗
 * @property {Boolean} value = showModal - v-model控制显隐
 * @property {String} posterType - 海报类别
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import Auth from '@/shopro/permission/index.js';
export default {
	name: 'shoproShare',
	components: {},
	data() {
		return {
			showShareGuide: false, //H5的指引。
			showPoster: false, //海报弹窗
			platform: this.$platform.get(),
			posterImage: '',
			canvasParams: {},
			posterType:'user'
		};
	},
	props: {
		value: {}
	},
	computed: {
		...mapGetters(['initShare', 'userInfo', 'isLogin', 'shareInfo']),
	},

	created() {
		uni.$on('ON_WX_SHARE', () => {
			this.showShare = false;
		});
	},
	mounted(){
		if(this.userInfo.agent){ 
			this.onPoster();
		}else{
			uni.showModal({
				title:'提醒',
				content:'请先升级会员，获取分享权限',
				showCancel:false,
				success:function(res) {
					if (res.confirm) {
						uni.navigateBack();
					}
				}
			});
			
		}

	},
	methods: {
		
		// 绘制成功
		onSuccess(e) {
			this.posterImage = e;
		},
		// 开始绘制
		onPoster() {

			console.log(this.showShare)
			this.posterImage = '';
			uni.hideTabBar();
			if (this.$store.getters.isLogin) {
				this.canvasParams = this.getPosterFormatter();
				this.showPoster = true;
			} else {
				this.$store.dispatch('showAuthModal', 'accountLogin');
			}
			this.showShare = false;
		},
		
		go(){
			uni.navigateBack();
		},

		// 保存图片
		async saveImage() {
			let that = this;
			if (['wxOfficialAccount', 'H5'].includes(this.platform)) {
				this.$u.toast('长按图片保存');
				
				this.showPoster = true;
				return false;
			}
			let authState = await new Auth('writePhotosAlbum').check();
			if (authState) {
				uni.saveImageToPhotosAlbum({
					filePath: that.posterImage,
					success: res => {
						this.$u.toast('保存成功');
					},
					fail: err => {
						console.log(`图片保存失败:`, err);
						this.$u.toast('保存失败');
					}
				});
			}
		},
		// 复制链接
		copySharePath() {
			let that = this;
			uni.setClipboardData({
				data: that.shareInfo.copyLink,
				success: data => {
					that.$u.toast('已复制到剪切板');
					that.showShare = false;
				}
			});
		},
		// 获取海报格式,规则说明在@/shopro/poster/tools.js中的initDrawArray
		getPosterFormatter() {
			const that = this;
			let data = {};
		
			switch (this.posterType) {
				case 'user':
					data = {
						backgroundImage: that.initShare.user_poster_bg,
						drawArray: [					
							// {
							// 	name: 'avatar',
							// 	type: 'image',
							// 	url: that.userInfo.avatar,
							// 	alpha: 1,
							// 	dWidth: 200,
							// 	dHeight: 200,
							// 	circleSet: {},
							// 	dy: 250,
							// 	dx:540,
							// },
							// #ifdef MP-WEIXIN
							{
								name: 'wxCode',
								type: 'image',
								url: `${that.$API_URL}wechat/wxacode?scene=${that.shareInfo.query}`,
								alpha: 1,
								// dy: 560,
								// isBgCenter: true,
								dWidth: 380,
								dHeight: 380,
								dy: 1600,
								dx:450			
							},
							// #endif
							// #ifndef  MP-WEIXIN
							{
								name: '普通二维码',
								type: 'qrcode',
								// text: that.$BASE_URL+"pages/index/user?qr_code="+this.userInfo.qr_code,
								text: 'http://gaobo.ws198.cn/index.html#/pages/index/register?qr_code='+that.userInfo.qr_code,
								dy: 1300,
								dx:500,
								size:300,
							},
							{
								name: '邀请码：',
								type: 'text',
								text: '邀请码：'+that.userInfo.qr_code,
								size: 45,
								dy: 1640,
								dx:800,
								color: '#000',
								textAlign: 'right',
								textBaseLine: 'middle'
							},	
							// #endif
						]
					};
					break;
				default:
					console.log('%cerr:没有此类型海报数据', 'color:green;background:yellow');
					break;
			}
			return data;
		}
	}
};
</script>

<style lang="scss">
// 指引
.guide-wrap {
	height: 100%;
	.guide-img {
		width: 580rpx;
		height: 430rpx;
	}
}
// 分享海报
.poster-btn-box {
	.cancel-btn {
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #ffffff;
		border-radius: 35rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
	.save-btn {
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: linear-gradient(90deg, #e9b461, #eecc89);
		border-radius: 35rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
	}
}
.poster-img-box {
	.poster-img {
		width: 660rpx;
		min-height: 800rpx;
		border-radius: 20rpx;
	}
}
// 分享tool
.share-box {
	background: #fff;
	width: 750rpx;
	border-radius: 30rpx 30rpx 0 0;
	padding-top: 30rpx;
	position: relative;

	.share-foot {
		font-size: 24rpx;
		color: #bfbfbf;
		height: 80rpx;
		border-top: 1rpx solid #eee;
	}

	.share-list-box {
		.share-btn {
			background: none;
			border: none;
			line-height: 1;
			padding: 0;
			&::after {
				border: none;
			}
		}
		.share-item {
			flex: 1;
			padding-bottom: 20rpx;

			.share-img {
				width: 70rpx;
				height: 70rpx;
				background: rgba(246, 246, 254, 1);
				border-radius: 50%;
				margin-bottom: 20rpx;
			}

			.share-title {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}
</style>
